import React, { useEffect,memo, useState } from 'react'
import { connect } from 'react-redux'
import  * as actionTypes from './store/actionCreators'
import MenuBar from '../../components/home/menuBar/MenuBar'
import SearchBar from '../../components/searchBar/SearchBar'
import ActivityBar from '../../components/home/activityBar/ActivityBar'
import ClassifyScrollBar from '../../components/home/classifyScrollBar/ClassifyScrollBar'
import Scroll from '../../baseUI/scroll'
import './home.css'
import {reqClassifyListData} from '@/api'
import ClassifyScroll from '@/components/home/classifyScroll/ClassifyScroll'
import {forceCheck} from 'react-lazyload'

// 首页
function Home(props) {
    const {homeData,classifyList} = props
    const {getHomeDataDispatch,setClassifyList}=props
    const {classify=[],menuBarData=[]}=homeData
    // console.log(homeData,classify,menuBarData,'[[][]')
    const [classifyNavDisplay,setClassifyNavDisplay]=useState(false)
    const [searchDisplay,setSearchDisplay]=useState(false)
    const [classifyListData,setClassifyListData]=useState([])
    const [classifyIndex,setClassifyIndex]=useState(0)
    const [page,setPage]=useState(1)
    const [loading,setLoading]=useState(false)

    // 页面加载更多
    useEffect(()=>{
        setLoading(true)
        reqClassifyListData(classifyList[classifyIndex]?.title,page)
            .then((res=>{
                // console.log(res)
                setClassifyListData([...classifyListData,...res.data.data.classifylistdata])
            }))
            .then(()=>{
                setLoading(false)
            })
    },[page])

    const changeIndex=()=>{
        
        // console.log('index',classifyList)
        reqClassifyListData(classifyList[classifyIndex],page)
            .then((res=>{
                // console.log(res)
                setClassifyListData(res.data.data.classifylistdata)
            }))
        setPage(1)
    }
    // 切换分类加载
    useEffect(()=>{
        changeIndex()
    },[classifyIndex])

    useEffect(()=>{
        if(!homeData.length){
            getHomeDataDispatch()
        }
        setClassifyList()
    },[])
    const handlePullUp=()=>{
        if(!loading){
            setPage(page+1)
        }
    }

    return (
        <div className='home_page'>
            <Scroll 
                direction={"vertical"}
                refresh={false}
                onScroll={
                    (e)=>{
                        // console.log(e)
                        if(e.y<-40){
                            setSearchDisplay(true)
                        }
                        else{
                            setSearchDisplay(false)
                        }
                        if(e.y<-565){
                            setClassifyNavDisplay(true)
                        }
                        else{
                            setClassifyNavDisplay(false)
                        }
                        forceCheck()
                    }
                }
                pullUp={handlePullUp}
                pullUpLoading={loading}
                // pullDown={handlePullDown}
            >   
                <div className='home_scroll'>
                    <div className='home_title'>xx购物</div>
                    <SearchBar />
                    <MenuBar classifyData={classify} menuBarData={menuBarData} />
                    <ActivityBar />
                    <ClassifyScrollBar
                        classifyList={classifyList}
                        classifyIndex={classifyIndex}
                        setClassifyIndex={setClassifyIndex}
                        classifyListData={classifyListData}
                    />
                </div>
            </Scroll>
            <div className='home_fixedbar'>
                <div style={!searchDisplay?{display:'none'}:{}}>
                    <SearchBar />
                </div>
                <div style={!classifyNavDisplay?{display:'none'}:{}}>
                    <ClassifyScroll classifyList={classifyList} setClassifyIndex={setClassifyIndex} classifyIndex={classifyIndex} />
                </div>
            </div>
        </div>
    )
}

const mapStateToPorps=(state)=>{
    return {
        homeData:state.home.homeData,
        classifyList:state.classify.classifyList
    }
}

const mapStateToDispatch=(dispatch)=>{
    return {
        getHomeDataDispatch(){
            dispatch(actionTypes.getHomeData())
        },
        setClassifyList(){
            dispatch(actionTypes.getClassifyList())
        }
    }
}

export default connect(mapStateToPorps,mapStateToDispatch)(memo(Home))
